const IncomeExpense = {
    data() {
        return {
            transactions: [],
            loading: false,
            error: '',
            showAddModal: false,
            addForm: {
                account_id: '',
                transaction_type: '',
                category: '',
                sub_category: '',
                amount: '',
                remark: ''
            },
            addLoading: false,
            addError: '',
            addSuccess: '',
            accounts: []
        }
    },
    methods: {
        async fetchTransactions() {
            this.loading = true;
            this.error = '';
            try {
                const token = localStorage.getItem('token');
                const res = await axios.get('/api/transaction/list?limit=10', {
                    headers: { Authorization: `Bearer ${token}` }
                });
                this.transactions = res.data.transactions || [];
            } catch (e) {
                this.error = '获取收支记录失败';
            } finally {
                this.loading = false;
            }
        },
        async fetchAccounts() {
            try {
                const token = localStorage.getItem('token');
                const res = await axios.get('/api/account/list', {
                    headers: { Authorization: `Bearer ${token}` }
                });
                this.accounts = res.data.accounts || [];
            } catch (e) {
                // 忽略账户获取失败
            }
        },
        async addTransaction() {
            this.addLoading = true;
            this.addError = '';
            this.addSuccess = '';
            try {
                const token = localStorage.getItem('token');
                await axios.post('/api/transaction/add', this.addForm, {
                    headers: { Authorization: `Bearer ${token}` }
                });
                this.addSuccess = '添加成功';
                this.showAddModal = false;
                this.addForm = {
                    account_id: '',
                    transaction_type: '',
                    category: '',
                    sub_category: '',
                    amount: '',
                    remark: ''
                };
                await this.fetchTransactions();
            } catch (e) {
                this.addError = e.response?.data?.error || '添加失败';
            } finally {
                this.addLoading = false;
            }
        }
    },
    mounted() {
        this.fetchTransactions();
        this.fetchAccounts();
    },
    template: `
        <div class="income-expense">
            <h2>收支管理</h2>
            <button class="btn btn-primary" @click="showAddModal = true">添加收支</button>
            <div v-if="error" class="error-message">{{ error }}</div>
            <table v-if="transactions.length" class="transaction-table" style="margin-top:20px;">
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>类型</th>
                        <th>主分类</th>
                        <th>子分类</th>
                        <th>金额</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="tx in transactions" :key="tx.transaction_id">
                        <td>{{ tx.transaction_time }}</td>
                        <td>{{ tx.transaction_type }}</td>
                        <td>{{ tx.category }}</td>
                        <td>{{ tx.sub_category }}</td>
                        <td>{{ tx.amount }}</td>
                        <td>{{ tx.remark }}</td>
                    </tr>
                </tbody>
            </table>
            <div v-else style="margin:20px 0;">暂无收支记录</div>
            <!-- 添加收支弹窗 -->
            <div v-if="showAddModal" class="modal-overlay">
                <div class="modal-content">
                    <h3>添加收支记录</h3>
                    <form @submit.prevent="addTransaction">
                        <div class="form-group">
                            <label>账户</label>
                            <select v-model="addForm.account_id" required class="form-control">
                                <option value="" disabled>请选择账户</option>
                                <option v-for="acc in accounts" :key="acc.account_id" :value="acc.account_id">
                                    {{ acc.account_type }} - {{ acc.card_number }}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>类型</label>
                            <select v-model="addForm.transaction_type" required class="form-control">
                                <option value="" disabled>请选择类型</option>
                                <option value="收入">收入</option>
                                <option value="支出">支出</option>
                                <option value="转账">转账</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>主分类</label>
                            <input v-model="addForm.category" required placeholder="如餐饮、交通" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>子分类</label>
                            <input v-model="addForm.sub_category" required placeholder="如外卖、地铁" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>金额</label>
                            <input v-model="addForm.amount" type="number" step="0.01" required placeholder="请输入金额" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>备注</label>
                            <input v-model="addForm.remark" placeholder="可选，备注" class="form-control" />
                        </div>
                        <button class="btn btn-primary" type="submit" :disabled="addLoading">保存</button>
                        <button class="btn btn-link" type="button" @click="showAddModal = false">取消</button>
                    </form>
                    <div v-if="addError" class="error-message">{{ addError }}</div>
                    <div v-if="addSuccess" class="success-message">{{ addSuccess }}</div>
                </div>
            </div>
        </div>
    `
};
export default IncomeExpense; 